<template>
  <div class="ysqjcdp-layout">
    <div
      class="layout-bg"
      :class="{'noside':!sideStatus}"
    />
    <!-- 两侧收起追加样式noside -->
    <img
      :src="require('@/assets/images/ysqjcdp/header.png')"
      class="layout-header"
    >
    <div class="layout-left" />
    <div class="layout-right" />
    <TimeInfo class="time-component" />
    <ManageInfo class="manage-component" />
    <BKMapDrawer
      ref="left"
      bottom="0"
      position="left"
      top="0"
      width="621"
      z-index="9"
      class="left-container"
    >
      <!-- <router-view /> -->

      <components
        :is="componentLeft"
        v-if="activeTab"
      />
    </BKMapDrawer>
    <BKMapDrawer
      ref="right"
      position="right"
      top="0"
      bottom=""
      width="621"
      z-index="9"
      class="right-container"
    >
      <RightMapMenu
        class="right-map-menu"
        :class="{'no-side':!sideStatus}"
      />
      <MapLegend
        class="map-legend-panel"
        :class="{'no-side':!sideStatus}"
      />
      <components
        :is="componentRight"
        v-if="activeTab"
      />
    </BKMapDrawer>
    <div
      class="layout-footer"
    >
      <div class="bottom-tab-box  flex-ai-c jc-c">
        <div
          v-for="tab in tabList"
          :key="tab.key"
          class="bottom-tab flex-ai-c jc-c"
          :class="{'tab-active':tab.key === activeTab}"
          @click="activeTab = tab.key"
        >
          <div class="bottom-tab-text">
            {{ tab.label }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TimeInfo from '@/views/business/ysqxx/components/business/time-info.vue'
import ManageInfo from '@/views/business/ysqxx/components/business/manage-info.vue'
import MapEventsMixins from '@/utils/mixins/map-events.mixins.js'
import MapMixins from '@/utils/mixins/map-jcdp.mixins.js'
import MapLegend from './components/map-legend.vue'
import RightMapMenu from './components/right-icon-menu.vue'

import zhzxLeft from './zhzx/left/index.vue'
import zhzxRight from './zhzx/right/index.vue'

export default {
  name: 'YsqjcdpLayout',
  components: {
    TimeInfo,
    ManageInfo,
    RightMapMenu,
    MapLegend,
    zhzxLeft,
    zhzxRight,
    ysqLeft: () => import('./ysq/left/index.vue'),
    ysqRight: () => import('./ysq/right/index.vue'),
    sqLeft: () => import('./sq/left/index.vue'),
    sqRight: () => import('./sq/right/index.vue')
  },
  mixins: [MapEventsMixins, MapMixins],
  data () {
    return {
      sideStatus: true,
      activeTab: 'zhzx',
      tabList: [
        {
          label: '综合展示',
          key: 'zhzx'
        }, {
          label: '雨水情',
          key: 'ysq'
        }, {
          label: '墒情',
          key: 'sq'
        }
      ],
      mapLegends: [
        {
          type: 'rect',
          color: '#F90000',
          fillColor: '224,69,69',
          layerId: 'ysqjcdp_history',
          name: '400mm',
          groupName: '业务图层',
          isClick: true
        },
        {
          type: 'rect',
          color: '#F90000',
          fillColor: '224,69,69',
          layerId: 'ysqjcdp_forcast',
          name: '400mm',
          groupName: '业务图层',
          isClick: true
        }
      ]
    }
  },
  computed: {
    componentLeft () {
      return this.activeTab + 'Left'
    },
    componentRight () {
      return this.activeTab + 'Right'
    }
  },
  created () {
    this.$root.$on('toggleSide', this.toggleSideExpand)
  },
  beforeDestroy () {
    this.$root.$off('toggleSide', this.toggleSideExpand)
  },
  methods: {
    async  initLayersAndMenus () {
      // await this.calculateBoundary()
      await this.createLayers()
      await this.createDrillDownClickLayer()
    },
    toggleSideExpand (sideStatus) {
      this.sideStatus = sideStatus
      this.$nextTick(() => {
        this.$refs.left.toggleExpand()
        this.$refs.right.toggleExpand()
      })
    }
  }
}
</script>
<style lang="scss">
@import "../../../assets/styles/ysqjcdp";
</style>
<style lang="scss" scoped>
.bottom-tab-box {
  position: absolute;
  bottom: 17px;
  left: 50%;
  transform: translateX(-50%);
  gap: 12px;

  .bottom-tab {
    width: 133px;
    height: 38px;
    background: url("~@/assets/images/ysqjcdp/bottom-nav.png") no-repeat left center;
    background-size: 100% 100%;
    font-size: 18px;
    text-align: left;
    color: #caecff;
    font-family: YouSheBiaoTiHei, serif;
    cursor: pointer;
    position: relative;

    &.tab-active {
      background: url("~@/assets/images/ysqjcdp/bottom-nav-active.png") no-repeat left center;
      background-size: 100% 100%;
    }

    .bottom-tab-text {
      position: absolute;
      left: 50%;
      bottom: 9px;
      transform: translateX(-50%);
      height: 14px;
      line-height: 14px;
    }
  }
}

.time-component {
  position: absolute;
  left: 43px;
  top: 10px;
  z-index: 9;
}

.manage-component {
  position: absolute;
  right: 49px;
  top: 30px;
  z-index: 10;
  pointer-events: all;
}

.ysqjcdp-layout {
  background-color: transparent;
}

.layout-bg {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("~@/assets/images/ysqjcdp/dark_bg.png") no-repeat left top;
  background-size: 100% 100%;
  pointer-events: none;

  &.noside {
    background: url("~@/assets/images/ysqxx/dark_bg_noside.png") no-repeat left top;
    background-size: 100% 100%;
  }
}

.layout-header {
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 9;
  pointer-events: none;
}

.layout-footer {
  background: url("~@/assets/images/ysqjcdp/footer.png") no-repeat left top;
  background-size: 100% 100%;
  height: 109px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8;
}

.left-container {
  padding: 65px 0 30px 15px;
  // pointer-events: none;
  border: 0;
  transition: left 0.5s;

  div {
    z-index: 10;
  }

  &.bk-map-drawer.left-drawer.drawer-expanded {
    border: none;
    left: 0 !important;
  }

  ::v-deep .drawer-sidebar {
    display: none;
  }
}

.right-container {
  padding: 65px 15px 30px 0;
  border: 0;
  transition: right 0.5s;
  // pointer-events: none;

  &.bk-map-drawer.right-drawer.drawer-expanded {
    border: none;
    right: 0 !important;
  }

  ::v-deep .drawer-sidebar {
    display: none;
  }
}

.layout-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 100%;
  z-index: 12;
  background: url("~@/assets/images/ysqjcdp/left-border.png") no-repeat left top;
  background-size: 100% 100%;
  pointer-events: none;
}

.layout-right {
  position: absolute;
  right: 0;
  top: 0;
  width: 15px;
  height: 100%;
  z-index: 12;
  background: url("~@/assets/images/ysqjcdp/right-border.png") no-repeat right top;
  background-size: 100% 100%;
  pointer-events: none;
}

.map-legend-panel {
  position: absolute;
  right: 637px;
  bottom: 79px;
  pointer-events: all;
}

.right-map-menu.no-side {
  right: 670px;
}

.map-legend-panel.no-side {
  right: 670px;
  bottom: -90px; // 2k
}

.right-map-menu {
  position: absolute;
  right: 637px;
  top: 115px;
  height: auto;
  pointer-events: all;
}
</style>
